<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
	<!--
	作者：1050595206@qq.com 
	时间：2020-06-17
	描述：
-->

	<head>
		<title>爱学习交流平台注册界面</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/bootstrap.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/animate.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/owl.carousel.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/fonts/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/fonts/fontawesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/fonts/flaticon/font/flaticon.css">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/WebTools/tapmodo-Jcrop/css/jquery.Jcrop.css" />
		<!-- Theme Style -->
		<link rel="stylesheet" href="${pageContext.request.contextPath}/front/css/style.css">
	</head>
	<style type="text/css">
		#a1 {
			font-size: 1.25rem;
		}
		
		#img3 {
			width: 100px;
			/*height: 100%;*/
			/*border-radius: 50px;*/
		}
		/*.select_picture {
			margin-left: 214px;
			margin-top: 10px;
		}*/
		
		.error {
			color: RED;
			font-size: 12px;
		}
		
		.success {
			color: green;
			font-size: 12px;
		}
		
		#verification_code_btn {
			margin-top: 37px;
		}
		
		.file {
			position: relative;
			display: inline-block;
			background: #D0EEFF;
			border: 1px solid #99D3F5;
			border-radius: 4px;
			padding: 4px 12px;
			overflow: hidden;
			color: #1E88C7;
			text-decoration: none;
			text-indent: 0;
			line-height: 20px;
			width: 92px;
		}
		
		.file input {
			position: absolute;
			font-size: 100px;
			right: 0;
			top: 0;
			opacity: 0;
		}
		
		.file:hover {
			background: #AADFFD;
			border-color: #78C3F3;
			color: #004974;
			text-decoration: none;
		}
		
		#code {
			margin-top: -10px;
		}
		
		.userImage {
			width: 100px;
			height: 100px;
			/*border-radius: 50px;*/
			overflow: hidden;
		}
		
		.jcrop-holder {
			margin: auto;
		}
	</style>

	<body>

		<header role="banner" id="header" style="position: fixed;">

			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<div class="container-fluid">
					<img src="images/logo.jpg" width="109px" height="78px">
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#entireNavbar" aria-controls="entireNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

					<div class="collapse navbar-collapse navbar-light" id="entireNavbar">
						<ul class="navbar-nav ">
							<li class="nav-item">
								<a class="nav-link active" href="index2.jsp">首页</a>
							</li>
							<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" href="courses.jsp" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">课程</a>
								<div class="dropdown-menu" aria-labelledby="dropdown04" id="tabdiv">
									<a class="dropdown-item" href="courses.jsp">HTML</a>
									<a class="dropdown-item" href="courses.jsp">WordPress</a>
									<a class="dropdown-item" href="courses.jsp">Laravel</a>
									<a class="dropdown-item" href="courses.jsp">JavaScript</a>
									<a class="dropdown-item" href="courses.jsp">Python</a>
								</div>

							</li>

							<li class="nav-item">
								<a class="nav-link" href="PersonalCenter.jsp">个人中心</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="about.jsp">关于我们</a>
							</li>

						</ul>
						<ul class="navbar-nav absolute-right" id="status1">
							<img class="rounded-circle mt-3" src="images/2.png" width="50" height="50" id="image" />
							<li class="dropdown">
								<a class="nav-link dropdown-toggle">${sessionScope.name}</a>
								<div class="dropdown-menu" aria-labelledby="dropdown05">
									<a href="PersonalCenter.jsp" class="dropdown-item">个人中心</a>
									<a href="${pageContext.request.contextPath}/AccountLoginAndLogout?op=exit" class="dropdown-item" href="#">退出登录</a>
								</div>
							</li>
						</ul>
						<ul class="navbar-nav absolute-right" id="status2">
							<li>
								<a href="login.jsp">登录</a> /
								<a href="register.jsp">注册</a>
							</li>

						</ul>
					</div>
				</div>
			</nav>
		</header>
		<!-- END header -->

		<section class="site-hero site-sm-hero overlay" id="firstSection" data-stellar-background-ratio="0.5" style="background-image: url(images/big_image_2.jpg);">
			<div class="container">
				<div class="row align-items-center justify-content-center site-hero-sm-inner">
					<div class="col-md-7 text-center">

						<div class="mb-5 element-animate">
							<h1 class="mb-2">让智慧带领人生</h1>
							<p class="bcrumb">
								<a href="index2.jsp">首页</a> <span class="sep ion-android-arrow-dropright px-2"></span> <span class="current">注册</span>
							</p>
						</div>

					</div>
				</div>
			</div>
		</section>
		<!-- END section -->

		<section class="site-section">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-md-7">
						<div class="form-wrap">

							<form action="${pageContext.request.contextPath}/AccountRegisterServlet" method="post" enctype="multipart/form-data">
								<div class="text-center">
									<h2 class="mb-5">注册新账号</h2>
								</div>

								<!-- 1 头像预览效果 -->
								<div class="text-center">
									<div class="userImage mx-auto">
										<img src="images/2.png" id="img3" />
									</div>
								</div>

								<input type="hidden" name="op" value="register">
								<div class=" text-center">
									<a href=" " class="btn select_picture file mt-3 mb-4">选择图片
										<input type="file" name="facePicture" onchange="setImagePriview()" id="file" accept="image/jpg,image/jpeg,image/png">
									</a>
								</div>
								<div class="form-group cutImgPanel text-center">

								</div>
								<div class="row">
									<div class="col-md-12 form-group">
										<label for="accountName">用户名</label>
										<input type="text" id="accountName" class="form-control py-2" required="required" name="accountName">
										<label id="accountNameTip" style="padding-left: 0px"></label>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12 form-group">
										<label for="phone">手机号</label>
										<input type="text" id="phone" class="form-control py-2" required="required" name="phone">
										<label id="phoneTip" style="padding-left: 0px"></label>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12 form-group">
										<label for="email">电子邮件地址</label>
										<input type="text" id="email" class="form-control py-2" name="email">
										<label id="emailTip" style="padding-left: 0px"></label>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12 form-group">
										<label for="password">密码</label>
										<input type="password" id="password" class="form-control py-2 password" required="required" data-container="body" data-toggle="popover" data-placement="top" data-content="密码为6~10位的字母、数字组合" name="password">
										<label id="passwordTip" style="padding-left: 0px"></label>
									</div>
								</div>
								<div class="row mb-5">
									<div class="col-md-12 form-group">
										<label for="confirm_password">确认密码</label>
										<input type="password" id="confirm_password" class="form-control py-2 password" required="required">
									</div>
								</div>
								<div class="row" id="code">
									<div class="col-md-9 form-group">
										<label for="verification_code">验证码</label>
										<input type="text" id="verification_code" class="form-control py-2" required="required">
										<label id="codeTip" style="padding-left: 0px"></label>
									</div>
									<input type="button" id="verification_code_btn" class="btn btn-primary px-4" value="获取验证码" style="height: 35px">
								</div>
								<div class="row">
									<div class="col-md-6 form-group">
										<input type="submit" value="注册" class="btn btn-primary px-5 py-2" id="register" disabled="disabled" style="height: 45px">
									</div>
								</div>
								<input type="hidden" name="pic-x" id="pic-x" value="0" />
								<input type="hidden" name="pic-y" id="pic-y" value="0" />
								<input type="hidden" name="destWidth" id="destWidth" value="0" />
								<input type="hidden" name="destHeight" id="destHeight" value="0" />
								<input type="hidden" name="finalWidth" id="finalWidth" value="0" />
								<input type="hidden" name="finalHeight" id="finalHeight" value="0" />
							</form>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- END footer -->

		<!-- loader -->
		<div id="loader" class="show fullscreen">
			<svg class="circular" width="48px" height="48px">
				<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee" />

				<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214" />
			</svg>
		</div>

		<script src="${pageContext.request.contextPath}/front/js/jquery-3.2.1.min.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/jquery-migrate-3.0.0.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/popper.min.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/bootstrap.min.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/owl.carousel.min.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/jquery.waypoints.min.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/jquery.stellar.min.js"></script>
		<script src="${pageContext.request.contextPath}/front/js/jquery.animateNumber.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/WebTools/tapmodo-Jcrop/js/jquery.Jcrop.js"></script>
		<!--<script src="${pageContext.request.contextPath}/back/js/layer/layer.js"></script>-->
		<script src="${pageContext.request.contextPath}/front/js/main.js"></script>
	</body>
	<script type="text/javascript">
		function iniJcrop() {
			$('#cutImg').Jcrop({
				onChange: Addparams,
				onSelect: Addparams,
				aspectRatio: 1
			});
		}

		function Addparams(coords) {
			//			console.log(coords)
			$('#pic-x').val(coords.x);
			$('#pic-y').val(coords.y);
			$('#destWidth').val(coords.w);
			$('#destHeight').val(coords.h);
			$('#finalWidth').val($('.cutImgPanel img').css('width').replace(/px/g, ''));
			$('#finalHeight').val($('.cutImgPanel img').css('height').replace(/px/g, ''));
			fixImg(coords);
		}

		function fixImg(coords) {

			//			console.log(($('#cutImg').width() * 100) / coords.w);
			//			console.log(($('#cutImg').height() * 100) / coords.h);
			$('#img3').css("width", ($('#cutImg').width() * 100) / coords.w);
			$('#img3').css("height", ($('#cutImg').height() * 100) / coords.h);
			$('#img3').css("margin-left", -((100 * coords.x) / coords.w));
			$('#img3').css("margin-top", -((100 * coords.y) / coords.h));
		}
		$(document).ready(function() {
			if("${sessionScope.name}" != "" && "${sessionScope.accountPic}" != "") {
				$("#status1 img").attr('src', '${pageContext.request.contextPath}/FileDownLoadServlet?op=getAccountFace&faceName=${sessionScope.accountPic}');
				$("#status2").hide()
			} else if("${sessionScope.name}" != "" && "${sessionScope.accountPic}" == "") {
				$("#status2").hide()
			} else if("${sessionScope.name}" == "") {
				$("#status1").hide()
				$("#home").removeAttr('onclick')
			}
			$('#firstSection').css('margin-top', $('header').height());
			//发送ajax请求
			$.ajax({
				async: true,
				url: "${pageContext.request.contextPath}/TabServlet",
				type: "GET",
				data: {
					op: "getAllTab"
				},
				dataType: "json",
				success: function(result, status, xhr) {
					//清空数据
					$('#tabdiv').empty();
					$.each(result, function(index, tab) {
						$('#tabdiv').append("<a class=\"dropdown-item\" href=\"courses.jsp?searchKey=" + escape(tab.tab_name) + "\">" + tab.tab_name + "</a>");
					});
				},
				error: function(xhr, status, error) {
					layer.msg("请求失败");
				}
			});
			// 对用户名输入框绑定失去焦点事件
			$("#accountName").blur(function() {
				// 获取输入的账号
				var accountName = $(this).val().trim();
				if(accountName == "") {
					$("#accountNameTip").text("用户名不能为空");
					$("#accountNameTip").attr("class", "error");
					// 注册按钮设置不可用
					$("#register").prop("disabled", true);
				} else {
					// 发送ajax请求
					$.ajax({
						async: true,
						url: "${pageContext.request.contextPath}/AccountRegisterServlet",
						type: "GET",
						data: {
							op: "existsOfAccountName",
							accountName: accountName
						},
						dataType: "text",
						success: function(result, status, xhr) {
							if(result == "true") { // 用户名存在
								$("#accountNameTip").text("用户名已存在");
								$("#accountNameTip").attr("class", "error");
								// 注册按钮设置不可用
								$("#register").prop("disabled", true);
							} else if(result == "false") { // 用户名不存在
								$("#accountNameTip").text("用户名可用");
								$("#accountNameTip").attr("class", "success");
								// 注册按钮设置可用
								$("#register").prop("disabled", false);
							}
						},
						error: function(xhr, status, error) {
							//alert("ajax异步请求失败");
							layer.msg("请求失败");
						}
					});
				}
			});
			//对手机号输入框绑定失去焦点事件
			$('#phone').blur(function() {
				//获取输入的手机号
				var phone = $(this).val().trim();
				if(phone == "") {
					$("#phoneTip").text("手机号不能为空");
					$("#phoneTip").attr("class", "error");
				} else {
					$.ajax({
						async: true,
						url: "${pageContext.request.contextPath}/AccountRegisterServlet",
						type: "GET",
						data: {
							op: "getAccountByphone",
							phone: phone
						},
						dataType: "text",
						success: function(result, status, xhr) {
							if(result == "true") { // 手机号存在
								$("#phoneTip").text("该手机号已被注册");
								$("#phoneTip").attr("class", "error");
								// 注册按钮设置不可用
								$("#register").prop("disabled", true);
							} else if(result == "false") { // 手机号不存在
								let phoneCodeVerification = /^[1][3,4,5,7,8][0-9]{9}$/;
								if(phoneCodeVerification.test(phone)) {
									$("#phoneTip").text("手机号码格式正确");
									$("#phoneTip").attr("class", "success");
									// 注册按钮设置可用
									$("#register").prop("disabled", false);
								} else {
									$("#phoneTip").text("请填写正确的手机号码");
									$("#phoneTip").attr("class", "error");
									// 注册按钮设置不可用
									$("#register").prop("disabled", true);
								}
							}
						},
						error: function(xhr, status, error) {
							//alert("ajax异步请求失败");
							layer.msg("请求失败");
						}
					});
				}
			});
			//对电子邮件地址输入框绑定失去焦点事件
			$('#email').blur(function() {
				//获取输入的电子邮件地址
				var email = $(this).val().trim();
				if(email != "") {
					$.ajax({
						async: true,
						url: "${pageContext.request.contextPath}/AccountRegisterServlet",
						type: "GET",
						data: {
							op: "getAccountByemail",
							email: email
						},
						dataType: "text",
						success: function(result, status, xhr) {
							if(result == "true") { // 电子邮件地址已存在
								$("#emailTip").text("该电子邮件地址已被注册");
								$("#emailTip").attr("class", "error");
								// 注册按钮设置不可用
								$("#register").prop("disabled", true);
							} else if(result == "false") { // 电子邮件地址不存在
								var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
								if(reg.test(email)) {
									$("#emailTip").text("电子邮件地址格式正确");
									$("#emailTip").attr("class", "success")
									// 注册按钮设置可用
									//$("#register").prop("disabled", false);
								} else {
									$("#emailTip").text("请填写正确的电子邮件地址");
									$("#emailTip").attr("class", "error");
									// 注册按钮设置不可用
									$("#register").prop("disabled", true);
								}
							}
						},
						error: function(xhr, status, error) {
							//alert("ajax异步请求失败");
							layer.msg("请求失败");
						}

					});
				} else {
					$("#emailTip").text("");
				}
			});

			//第一个密码输入框获取焦点事件
			$('#password').focus(function() {
				//弹出框
				$(this).popover();
			});
			$('#confirm_password').focus(function() {
				//获取第一个密码输入框的值
				var password = $('#password').val().trim();
				if(password == "") {
					$("#passwordTip").text("请先输入密码");
					$("#passwordTip").attr("class", "error");
					// 注册按钮设置不可用
					$("#register").prop("disabled", true);
				}
			});
			//对密码输入框绑定失去焦点事件
			$('#password').blur(function() {
				$('#password').popover('hide');
				//获取第一个密码输入框的值
				var password = $(this).val().trim();
				var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
				if(reg.test(password)) {
					$("#passwordTip").text("密码格式正确，请再次确认密码");
					$("#passwordTip").attr("class", "success")
					// 注册按钮设置不可用
					$("#register").prop("disabled", true);
					//确认密码输入框设置可用
					$('#confirm_password').prop("disabled", false);
				} else {
					$("#passwordTip").text("请填写正确的密码格式");
					$("#passwordTip").attr("class", "error");
					// 注册按钮设置不可用
					$("#register").prop("disabled", true);
					//确认密码输入框设置不可用
					$('#confirm_password').prop("disabled", true);
				}
			});
			//对确认密码输入框绑定失去焦点事件
			$('#confirm_password').blur(function() {
				//获取第一个密码输入框的值
				var password = $('#password').val().trim();
				//获取第二个密码输入框的值
				var confirm_password = $(this).val().trim();
				if(password == confirm_password) {
					$("#passwordTip").text("密码正确");
					$("#passwordTip").attr("class", "success");
					// 注册按钮设置可用
					$("#register").prop("disabled", false);
				} else {
					$("#passwordTip").text("两次密码不一致，请重新填写");
					$("#passwordTip").attr("class", "error");
					// 注册按钮设置不可用
					$("#register").prop("disabled", true);
				}
			});
			//对获取验证码按钮绑定点击事件
			$('#verification_code_btn').click(function() {
				//获取手机号输入框的值
				var phone = $('#phone').val().trim();

				if(phone == "") {
					$('#codeTip').text("请输入手机号");
					$("#codeTip").attr("class", "error");
				} else {
					//获取验证码按钮设置不可用
					$("#verification_code_btn").prop("disabled", true);
					//时间刷新
					var count = 60;
					var countdown = setInterval(countDown, 1000);
					//获取验证码按钮倒计时
					function countDown() {
						$("#verification_code_btn").val("重新发送(" + count + ")");
						if(count == 0) {
							$("#verification_code_btn").val("获取验证码");
							$("#verification_code_btn").prop("disabled", false);
							clearInterval(countdown);
						}
						count--;
					}
					$.ajax({
						async: true,
						url: "${pageContext.request.contextPath}/AccountRegisterServlet",
						type: "GET",
						data: {
							op: "getVerificationCode",
							phone: phone,
							flag: ""
						},
						dataType: "text",
						success: function(result, status, xhr) {
							if(result == "succeed") {
								$("#codeTip").text("验证码发送成功");
								$("#codeTip").attr("class", "success");
								// 按钮设置不可用
								//$("#verification_code_btn").prop("disabled", true);
							} else {
								$("#codeTip").text("验证码发送失败");
								$("#codeTip").attr("class", "error");
								// 按钮设置可用
								$("#verification_code_btn").prop("disabled", false);
							}
						},
						error: function(xhr, status, error) {
							//alert("ajax异步请求失败");
							layer.msg("请求失败");
						}

					});
				}
			});
			//对验证码输入框绑定失去焦点事件
			$('#verification_code').blur(function() {
				//获取验证码输入框的值
				var verification_code = $(this).val().trim();
				if(verification_code == "") {
					$("#codeTip").text("请输入验证码");
					$("#codeTip").attr("class", "success");
					// 注册按钮设置不可用
					$("#register").prop("disabled", true);

				} else {
					$.ajax({
						async: true,
						url: "${pageContext.request.contextPath}/AccountRegisterServlet",
						type: "GET",
						data: {
							op: "getVerificationCode",
							inputCode: verification_code,
							flag: "inputCode"
						},
						dataType: "text",
						success: function(result, status, xhr) {
							if(result == "false") {
								$("#codeTip").text("请先获取验证码");
								$("#codeTip").attr("class", "error");
								// 注册按钮设置不可用
								$("#register").prop("disabled", true);
							} else {
								if(result == verification_code) {
									$("#codeTip").text("验证正确");
									$("#codeTip").attr("class", "success");
									//判断 设置按钮可用或不可用状态
									/* if($('#accountNameTip').text() == "用户名可用" &&
										$('#phoneTip').text() == "手机号码格式正确" &&
										$('#passwordTip').text() == "密码正确" &&
										$('#emailTip').text() == "" || $('#emailTip').text() == "电子邮件地址格式正确") {
										// 注册按钮设置可用
										$("#register").prop("disabled", false);
									} else {
										// 注册按钮设置不可用
										$("#register").prop("disabled", true);
									} */
									// 注册按钮设置可用
									$("#register").prop("disabled", false);
								} else {
									$("#codeTip").text("验证不一致，请重新输入或获取验证码");
									$("#codeTip").attr("class", "error");
									// 注册按钮设置不可用
									$("#register").prop("disabled", true);

								}
							}
						},
						error: function(xhr, status, error) {
							//alert("ajax异步请求失败");
							layer.msg("请求失败");
						}

					});
				}
			});
		});
		//图片预览
		// 选择文件的改变事件,生成图片预览功能
		function setImagePriview() {
			// 得到文件列表数组,获取数组中的第一个文件
			var file = document.getElementById("file").files[0];
			// 没有选择文件
			if(file == null) {
				document.getElementById("img3").src = "images/2.png";
				$('.cutImgPanel').html("");
				$('.cutImgPanel').append('<img src="images/2.png" id="cutImg" class="img-thumbnail mx-auto" style="width: 100%;" />')
				//					document.getElementById("cutImg").src = this.result;
				iniJcrop();
			} else {
				// 构建一个文件渲染对象
				var reads = new FileReader();
				// FileReader.readAsDataURL 读取指定Blob或File的内容
				reads.readAsDataURL(file);
				// 获取文件数据
				reads.onload = function() {
					// 显示图片
					document.getElementById("img3").src = this.result;
					$('.cutImgPanel').html("");
					$('.cutImgPanel').append('<img src="' + this.result + '" id="cutImg" class="img-thumbnail mx-auto" style="width: 100%;" />');
					$('.cutImgPanel').append('<button type="button" class="btn btn-primary px-4 mt-3" onclick="emptyPic()">确定</button>');
					//					document.getElementById("cutImg").src = this.result;
					iniJcrop();
				}
			}

		}
		//清空裁剪图片
		function emptyPic() {
			$('.cutImgPanel').empty();
		}
		// 提示文件上传不符合的操作
		var fileuploaderror = "${param.fileuploaderror}";
		if(fileuploaderror != "") {
			//alert("图片文件只能是jpg/jpeg/png格式");
			layer.msg("图片文件只能是jpg/jpeg/png格式", {
				icon: 0
			});
		}
	</script>

</html>